<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
            <el-form-item label="商品名称" prop="goodsname">
                <el-input v-model="ruleForm.goodsname" />
            </el-form-item>
              <el-form-item label="商品价格" prop="goodsprice">
                <el-input v-model="ruleForm.goodsprice" />
            </el-form-item>
              <el-form-item label="商品重量" prop="goodsweight">
                <el-input v-model="ruleForm.goodsweight" />
            </el-form-item>
              <el-form-item label="商品库存" prop="goodsnum">
                <el-input v-model="ruleForm.goodsnum" />
            </el-form-item>
              <el-form-item label="商品分类" prop="goodscate">
                    <el-cascader v-model="ruleForm.goodscate" :props="props" :options="options" @change="handleChange" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import {getGoodsCate} from '../../../api/good.js'
import {reactive,ref} from 'vue';
import showElemessage from '../../../tools/showElemessage.js';
let ruleForm = reactive({
    goodsname:"",
    goodsprice:"",
    goodsweight:"",
    goodsnum:"",
    goodscate:""
})
let options = ref([])
let rules = reactive({
     goodsname: { required: true, message: "请您填写商品名称", trigger: "blur" },
     goodsprice: { required: true, message: "请您填写商品价格", trigger: "blur" },
     goodsweight: { required: true, message: "请您填写商品重量", trigger: "blur" },
     goodsnum: { required: true, message: "请您填写商品库存", trigger: "blur" },
     goodscate: { required: true, message: "请您选择商品分类", trigger: "blur" },
})
let emit = defineEmits(['sendCateid'])
let handleChange =(value)=>{
    console.log(value)
    if(value.length<3){
        showElemessage("商品分类必须为三级分类",'error',2000)
        ruleForm.goodscate = ""
        return
    }
    // 告诉父组件cat_id改变了
    emit("sendCateid",value[2])
}
let props = reactive({
    label:"cat_name",
    value:"cat_id"
})
let getCateList =  async ()=>{
    let res = await getGoodsCate();
    console.log(res)
    options.value = res.data.data;
}
getCateList();
let ruleFormRef = ref(null);
defineExpose({
    ruleFormRef
})
</script>